Object.defineProperty和proxy

Object.defineProperty问题

• Object.defineProperty() 无法监控到数组下标的变化。vue只能通过以下几种方法来监听

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上几种方法也是经过vue内部处理后才能监听的。

• 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历

Proxy

特点：

• 可以劫持整个对象，并返回一个新对象
• 有13种劫持操作
• Proxy是es6提供的，兼容性不好,无法用polyfill磨平

Proxy使用：

es6提供proxy构造函数，第一个参数target:是所要代理的目标对象，可以是空对象。第二个handler是拦截器，一个拦截器可以有多个拦截操作

var proxy = new Proxy(target, handler);

所有的对target的操作都落在proxy上了。

拦截操作一共有13个

更多拦截操作信息>>

Reflect

反射：通过类的类类型来操作类的属性。包含来对象语言内部的方法，一共有13种，和proxy一一对应，如果在Proxy中调用Reflect的话，其实对应的就是默认行为。

Proxy的this指向

虽然 Proxy 可以代理针对目标对象的访问， 但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。